<template>
  <div class="dashboard-container">
    <el-row v-if="chosenCompany">
      <el-col :span="12">
        <div class="tab-container">
          <el-tag type="primary">客户订单</el-tag>
          <el-tabs style='margin-top:15px;' v-model="activeName" type="border-card">
            <el-tab-pane v-for="item in tabMapOptions_order" :label="item.label" :key='item.key' :name="item.key">
              <keep-alive>
                <compute-list v-if='activeName == "compute"'></compute-list>
                <quote-list v-if="activeName == 'quote'"></quote-list>
                <order-list v-if='activeName == "order"'></order-list>
              </keep-alive>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="tab-container">
          <el-tag type="primary">XX管理</el-tag>
          <!--<el-tabs style='margin-top:15px;' v-model="activeName" type="border-card">
            <el-tab-pane v-for="item in tabMapOptions_order" :label="item.label" :key='item.key' :name="item.key">
              <keep-alive>
                &lt;!&ndash;<tab-pane v-if='activeName==item.key' :type='item.key' @create='showCreatedTimes'></tab-pane>&ndash;&gt;
                <order-list></order-list>
              </keep-alive>
            </el-tab-pane>
          </el-tabs>-->
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="请选择公司"
      :visible.sync="isShowChooseCompany"
      size="small" :close-on-click-modal='false' :close-on-press-escape="false" :show-close="false">
      <el-alert
        title="您有多家公司,请选择"
        type="info"
        close-text="知道了">
      </el-alert>
      <el-button
        v-for="item in chooseCompanies"
        @click="confirmCompany(item)"
        type="primary"
        size="large"
        :key="item.company_id"
        style="margin: 10px">{{item.company_name}}</el-button>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import orderList from './components/tab_orderList'
import computeList from './components/tab_computeList'
import quoteList from './components/tab_quoteList'

export default {
  name: 'index',
  components:{
    orderList,
    computeList,
    quoteList
  },
  data(){
    return {
      isShowChooseCompany:false,
      chooseCompanies:[],
      tabMapOptions_order: [
        { label: '核算单', key: 'compute' },
        { label: '报价单', key: 'quote' },
        { label: '订单', key: 'order' }
      ],
      activeName: 'compute',
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'userinfo',
      'chosenCompany'
    ])
  },
  mounted(){
    if(!this.$store.getters.chosenCompany){
      this.$store.dispatch('GetInfo').then(res => {
        this.loading = false
        if(res.company && res.company.length > 0){
          this.chooseCompanies = res.company
          this.isShowChooseCompany = true
        }else{
          this.$router.push({ path: '/' });
        }
      }).catch(() => {
        this.loading = false
        this.$message.error('获取用户信息失败!');
      })
    }else {
      this.$message({
        message: '已经选择公司了',
        type: 'success'
      });
    }
  },
  methods:{
    confirmCompany(item){
      this.$store.dispatch('setCompany',item)
      this.isShowChooseCompany = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .tab-container{
    margin: 10px;
  }
</style>
